<template>
	<view>
		<el-dialog v-model="dialogFormVisible" title="修改密码">
			<el-form ref="formRef" :model="dynamicValidateForm" label-width="120px" class="demo-dynamic">
				<el-form-item
					prop="oldPssword"
					label="原密码"
					:rules="[
						{
							required: true,
							message: '请输入原密码',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="dynamicValidateForm.oldPssword" />
				</el-form-item>
				<el-form-item
					prop="password"
					label="新密码"
					:rules="[
						{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="dynamicValidateForm.password" />
				</el-form-item>
				<el-form-item
					prop="newPassword"
					label="确认新密码"
					:rules="[
						{
							required: true,
							message: '请确认新密码',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="dynamicValidateForm.newPassword" />
				</el-form-item>
				<el-form-item>
					<el-button @click="dialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm(formRef)">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</view>
</template>

<script setup lang="ts">
	import {ref,reactive} from 'vue'
	import type {
		FormInstance,
	} from 'element-plus'
const dialogFormVisible = ref(false)
const formRef = ref < FormInstance > ()
const dynamicValidateForm = reactive({
	oldPassword: '',
	password: '',
	newPassword: ''
})

const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!')
			return false
		}
	})
}
const showModal = () => {
	dialogFormVisible.value = true
}
defineExpose({
	showModal
})
</script>

<style></style>
